<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>首页管理 / 导航栏列表</span>
                <Button type="info" ghost icon="md-add" @click="addNavVisable=true">添加导航列</Button>
            </p>
            <!--导航栏数据表格-->
            <div>
                <Table :height="508" stripe :columns="navColunms" :data="navList">
                    <template slot-scope="{ row }" slot="action">
                        <Button ghost type="info" size="small" icon="md-create" style="margin-right: 5px"
                                @click="editNav(row)">编辑
                        </Button>
                        <Button ghost type="error" size="small" icon="md-trash" @click="deleteNav(row.navId)">删除
                        </Button>
                    </template>
                </Table>
            </div>
        </Card>
        <!--添加导航列对话框-->
        <Modal v-model="addNavVisable" title="添加导航列" footer-hide>
            <Form ref="navVoRef" :model="navVo" :rules="navVoRules" :label-width="120">
                <FormItem label="导航列名称:" prop="name">
                    <Input v-model="navVo.name" type="text" placeholder="请输入导航列内容"/>
                </FormItem>
                <FormItem label="导航列地址:" prop="navUrl">
                    <Input v-model="navVo.navUrl" type="text" placeholder="请输入导航列地址"
                           @keyup.native.enter="addNav('navVoRef')"/>
                </FormItem>
                <Button type="success" long @click="addNav('navVoRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="addNavVisable=false">取消</Button>
            </Form>
        </Modal>
        <!--更新导航列对话框-->
        <Modal v-model="editNavVisable" title="添加导航列" footer-hide :closable="false">
            <Form ref="navVoRef" :model="navVo" :rules="navVoRules" :label-width="120">
                <FormItem label="导航列名称:" prop="name">
                    <Input v-model="navVo.name" type="text" placeholder="请输入导航列内容"/>
                </FormItem>
                <FormItem label="导航列地址:" prop="navUrl">
                    <Input v-model="navVo.navUrl" type="text" placeholder="请输入导航列地址"
                           @keyup.native.enter="updateNav('navVoRef')"/>
                </FormItem>
                <Button type="success" long @click="updateNav('navVoRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="cancelUpdate">取消</Button>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        navList: [],
        addNavVisable: false,
        editNavVisable: false,
        navColunms: [
          {
            title: '#',
            key: 'navId',
            align: 'center'
          },
          {
            title: '名称',
            key: 'navContent',
            align: 'center'
          },
          {
            title: '地址',
            key: 'navUrl',
            align: 'center'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        navVoRules: {
          name: [
            { required: true, message: '导航列名称不能为空', trigger: 'blur' }
          ],
          navUrl: [
            { required: true, message: '导航列地址不能为空', trigger: 'blur' }
          ]
        },
        navVo: {
          id: 0,
          name: '',
          navUrl: ''
        }
      }
    },
    mounted() {
      this.getNavs()
    },
    methods: {
      getNavs() {
        this.$http.get('navs').then(res => {
          res = res.data;
          if (res.code === 0) {
            this.navList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 添加导航栏数据
      addNav(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return;
          this.$http.post('nav', new URLSearchParams(this.navVo)).then(res => {
            res = res.data;
            if (res.code === 6601) {
              this.$refs[name].resetFields();
              this.addNavVisable = false;
              this.getNavs();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          })
        })
      },
      // 删除导航栏
      deleteNav(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该导航列吗？',
          onOk: () => {
            this.$http.delete(`nav?id=${id}`).then(res => {
              res = res.data;
              if (res.code === 6620) {
                this.getNavs()
                this.$Message.success(res.msg)
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      editNav(row) {
        this.navVo.id = row.navId;
        this.navVo.name = row.navContent;
        this.navVo.navUrl = row.navUrl;
        this.editNavVisable = true;
      },
      // 取消更新导航栏数据
      cancelUpdate() {
        this.navVo.id = 0;
        this.navVo.name = '';
        this.navVo.navUrl = '';
        this.editNavVisable = false;
      },
      // 更新导航列
      updateNav(name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.put('nav', new URLSearchParams(this.navVo)).then(res => {
            res = res.data;
            if (res.code === 6610) {
              this.$refs[name].resetFields()
              this.navVo.id = 0;
              this.editNavVisable = false
              this.$Message.success(res.msg)
              this.getNavs()
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
